<template>
	<view class="my">
		<view class="my-box">
			<view class="user-msg">
				<image class="img" :src="avatar" mode="aspectFit"></image>
				<view class="userInfo">
					<view class="userInfoLeft">
						<view class="userInfoLeftContain">
							<view class="userInfoLeftContainText">
								ID：
							</view>
							<text>{{uid}}</text>
						</view>
						<view class="userInfoLeftContain">
							<view class="userInfoLeftContainText">
								Tel：
							</view>
							<text>{{phone}}</text>
						</view>
					</view>
					<view class="userInfoRight">
						剩余积分：<text>{{integral}}</text>
					</view>
				</view>
			</view>
			<!-- 积分充值 begin-->
			<view>
				<view class="m-integral">
					<view class="m-integral-img">
						<image src="@/static/img/vip.png"></image>
						<view class="m-text">
							<view>充值积分</view>
							<view style="color: red;">剩余积分为{{integral}}</view>
						</view>
					</view>
					<view class="m-btn" @click="recharge(integral)">
						<span>立即充值</span>
					</view>
				</view>
			</view>
			<!-- 积分充值 end-->
			<view class="data-msg">
				<!-- 呼叫转移设置 -->
				<view class="msg-content" @click="calltransfer(1)" :class="{'active':active === 1}">
					<view class="phoneImage">
						<image src="@/static/img/phone.png" mode=""></image>
					</view>
					<text style="margin-left: -295rpx; font-size: 30rpx;" @click="calltransfer(1)">呼叫转移设置</text>
					<view class="hand">
						<image src="@/static/img/hand.png" mode=""></image>
					</view>
				</view>
				<!-- 联系客服 -->
				<button class="msg-content buttons" open-type="contact" @click="change(2)"
					:class="{'active':active === 2}">
					<view class="contactImage">
						<image src="@/static/img/heades.png" mode=""></image>
					</view>
					<text style="margin-left: -350rpx; font-size: 30rpx;">联系客服</text>
					<view class="hand">
						<image src="@/static/img/hand.png" mode=""></image>
					</view>
				</button>
				<view class="msg-content" @click="setting(4)" :class="{'active':active === 4}">
					<view class="quiteImage">
						<image src="@/static/img/shezhi.png" mode=""></image>
					</view>
					<text style="margin-left: -350rpx; font-size: 30rpx;">账号设置</text>
					<view class="hand">
						<image src="@/static/img/hand.png" mode=""></image>
					</view>
				</view>
				<!-- 退出登录 -->
				<view class="msg-content" @click="logout(3)" :class="{'active':active === 3}">
					<view class="quiteImage">
						<image src="@/static/img/quite.png" mode=""></image>
					</view>
					<text style="margin-left: -350rpx; font-size: 30rpx;">退出登录</text>
					<view class="hand">
						<image src="@/static/img/hand.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 去登录 -->
			<view class="goLogin" v-if="!nickname">
				<view class="goLoginArea">
					<text>登录后体验完整服务</text>
					<view class="login" @click="goLogin">
						去登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import getImgUrl from '@/getImg/index.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		getMenuList,
		getUserInfo
	} from '@/api/user.js';
	import {
		orderData
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef H5
	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	import {
		log
	} from 'util';
	// #endif
	const app = getApp();
	export default {
		// components: {
		// 	// #ifdef MP
		// 	authorize
		// 	// #endif
		// },
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				active: 0, // 选中状态
				orderMenu: [{
						img: '/static/images/order1.png',
						title: '待付款',
						url: '/pages/users/order_list/index?status=0',
						num: 0
					},
					{
						img: '/static/images/order2.png',
						title: '待发货',
						url: '/pages/users/order_list/index?status=1',
						num: 0
					},
					{
						img: '/static/images/order3.png',
						title: '待收货',
						url: '/pages/users/order_list/index?status=2',
						num: 0
					},
					{
						img: '/static/images/order4.png',
						title: '待评价',
						url: '/pages/users/order_list/index?status=3',
						num: 0
					},
					{
						img: '/static/images/order5.png',
						title: '售后/退款',
						url: '/pages/users/user_return_list/index',
						num: 0
					},
				],
				imgUrls: [],
				userMenu: [],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				MyMenus: [],
				wechatUrl: [],
				servicePic: '/static/images/customer.png',
				sysHeight: sysHeight,
				// #ifdef MP
				pageHeight: '100%',
				// #endif
				// #ifdef H5
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin(),
				//#endif
				nickname: '',
				phone: '',
				avatar: '',
				integral: 0
			}
		},
		onLoad() {
			this.active = 0
			let that = this;
			// #ifdef H5
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
			that.$set(that, 'MyMenus', app.globalData.MyMenus);
			if (!this.$Cache.has('cityList')) this.getCityList();
			if (that.isLogin == false) {
				// #ifdef H5
				toLogin()
				// #endif
			}
		},
		onShow: function() {
			this.active = 0
			let that = this;
			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
			if (that.isLogin) {
				this.getMyMenus();
				// this.setVisit();
				this.getOrderData();
				this.$store.dispatch('USERINFO');
			} else {
				toLogin();
			}
			// 获取用户信息
			this.getUserInfo()
		},
		methods: {
			change(status) {
				this.active = status
			},
			//去登陆
			goLogin() {
				uni.navigateTo({
					url: '/pages/users/login/index'
				})
			},
			//  呼叫转移
			calltransfer(status) {
				this.active = status
				uni.navigateTo({
					url: '../calltransfer/calltransfer'
				})
			},
			// 账号设置
			setting(status) {
				this.active = status
				uni.navigateTo({
					url: '/pages/setting/personalSetting'
				})
			},
			//退出登录
			logout(status) {
				this.active = status
				toLogin();
				uni.navigateTo({
					url: '/pages/users/login/index'
				})
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.nickname = res.data.nickname
					this.avatar = getImgUrl(res.data.avatar)
					this.phone = res.data.phone
					this.integral = res.data.integral
				})
			},
			// 记录会员访问
			// setVisit(){
			// 	setVisit({
			// 		url:'/pages/user/index'
			// 	}).then(res=>{})
			// },
			navito(e) {
				window.location.href = 'https://' + e;
			},
			kefuClick() {
				location.href = this.chatUrl;
			},
			getOrderData() {
				let that = this;
				orderData().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = res.data.unPaidCount
								break
							case '待发货':
								item.num = res.data.unShippedCount
								break
							case '待收货':
								item.num = res.data.receivedCount
								break
							case '待评价':
								item.num = res.data.evaluatedCount
								break
							case '售后/退款':
								item.num = res.data.refundCount
								break
						}
					})
					that.$set(that, 'orderMenu', that.orderMenu);
				})
			},
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
			// 授权回调
			onLoadFun() {
				this.getMyMenus();
				// this.setVisit();
				this.getOrderData();
			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting)
					}
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/app_login/index'
				})
			},
			/**
			 *
			 * 获取个人中心图标
			 */
			getMyMenus: function() {
				let that = this;
				if (this.MyMenus.length) return;
				// getMenuList().then(res => {
				// 	that.$set(that, 'MyMenus', res.data.routine_my_menus);
				// 	that.wechatUrl = res.data.routine_my_menus.filter((item) => {
				// 		return item.url.indexOf('service') !== -1
				// 	})
				// 	res.data.routine_my_menus.map((item) => {
				// 		if (item.url.indexOf('service') !== -1) that.servicePic = item.pic
				// 	})
				// 	if (res.data.routine_my_banner) {
				// 		that.imgUrls = res.data.routine_my_banner
				// 	}
				// });
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false) {
					toLogin();
				} else {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}
			},
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: '/pages/users/user_sgin/index'
				})
			},
			// goMenuPage
			goMenuPage(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url
					})
				} else {
					// #ifdef MP
					this.openAuto()
					// #endif
				}
			},
			// 获取地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					let oneDay = 24 * 3600 * 1000;
					this.$Cache.setItem({
						name: 'cityList',
						value: res.data,
						expires: oneDay * 7
					}); //设置七天过期时间
				})
			},
			// 立即充值
			recharge(integral) {
				uni.navigateTo({
					url: '/pages/recharge/recharge?integral=' + integral
				})
			}
		}
	}
</script>

<style lang="scss">
	.active {
		background-color: #ffe1c2;
		border: 3rpx solid #ffa64c;
	}

	.m-integral {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff0df;
		border-radius: 20rpx;
		margin: 0 20rpx;
		margin-top: 100rpx;
	}

	.m-integral-img {
		display: flex;
		margin-left: 40rpx;
	}

	.m-integral-img image {
		margin-top: 10rpx;
		width: 124rpx;
		height: 80rpx;
	}

	.m-text {
		font-size: 25rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		font-weight: 600;
	}

	.m-btn {
		width: 178rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #f2aa6a;
		color: #fff;
		margin: 20rpx;
		position: relative;
	}

	.m-btn span {
		position: absolute;
		top: 10rpx;
		left: 33rpx;
	}

	.my {
		.my-box {
			width: 100%;
			height: 100vh;
			background: linear-gradient(to bottom, #ffe1bb, 80%, #fff1e0);

			.data-msg {
				margin: 0 20rpx;
				margin-top: 20rpx;
				height: 500rpx;
				background-color: #fff0df;
				border-radius: 20rpx;
				padding: 40rpx;

				.msg-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20px;
					border-bottom: 5rpx solid #eee;
					height: 80rpx;
					width: 85vw;
					padding-left: 10rpx;

					// 呼叫转移图标
					.phoneImage {
						width: 40rpx;
						height: 50rpx;
						padding-bottom: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					// 联系客服图标
					.contactImage {
						width: 40rpx;
						height: 50rpx;
						padding-bottom: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					// 退出登录图标
					.quiteImage {
						width: 40rpx;
						height: 50rpx;
						padding-bottom: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					// 小手图标
					.hand {
						width: 40rpx;
						height: 50rpx;
						margin-bottom: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.buttons {
					background-color: #fff0df;
				}
			}

			// 去登录
			.goLogin {
				width: 100%;
				height: 60rpx;
				margin-top: 230rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.goLoginArea {
					width: 95%;
					height: 100%;
					background-color: #000;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: 20rpx;
					padding-right: 10rpx;

					text {
						color: #fff;
					}

					.login {
						width: 20%;
						height: 80%;
						background-color: #ffe2ba;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 20rpx;
					}
				}
			}

			.user-msg {
				display: flex;
				flex-direction: row;
				margin-left: 20rpx;
				height: 200rpx;
				padding-top: 160rpx;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: skyblue;
				}

				// 用户信息
				.userInfo {
					flex: 1;
					height: 100rpx;
					display: flex;
					padding: 8rpx 0;
					padding-left: 20rpx;

					.userInfoLeft {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.userInfoLeftContain {
							display: flex;

							// ID & Tel
							.userInfoLeftContainText {
								width: 60rpx;
								display: flex;
								justify-content: flex-end;
							}
						}
					}

					// 剩余积分
					.userInfoRight {
						flex: 1;
						display: flex;
						align-items: flex-end;
						padding-left: 100rpx;
					}
				}
			}
		}
	}
</style>